<script id="sortableTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">普通拖放排序</h5>
                <div class="card-body">
                    <ul class="k-list k-reset" id="generalSortable">
                        <li class="sortItem k-item">
                            <img src="img/temp/Pegasus.png" alt="天马座">
                            <h5>星矢</h5>
                            <small>SEIYA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Dragon.png" alt="天龙座">
                            <h5>紫龙</h5>
                            <small>SHIRYU</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Cygnus.png" alt="天鹅座">
                            <h5>冰河</h5>
                            <small>HYOGA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Andromeda.png" alt="仙女座">
                            <h5>瞬</h5>
                            <small>SHUN</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Phoenix.png" alt="凤凰座">
                            <h5>一辉</h5>
                            <small>IKKI</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">禁用拖放排序</h5>
                <div class="card-body">
                    <ul class="k-list k-reset" id="disabledSortable">
                        <li class="sortItem k-item">
                            <img src="img/temp/Pegasus.png" alt="天马座">
                            <h5>星矢</h5>
                            <small>SEIYA</small>
                        </li>
                        <li class="sortItem k-item disabled">
                            <img src="img/temp/Dragon.png" alt="天龙座">
                            <h5>紫龙</h5>
                            <small>SHIRYU</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Cygnus.png" alt="天鹅座">
                            <h5>冰河</h5>
                            <small>HYOGA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Andromeda.png" alt="仙女座">
                            <h5>瞬</h5>
                            <small>SHUN</small>
                        </li>
                        <li class="sortItem k-item disabled">
                            <img src="img/temp/Phoenix.png" alt="凤凰座">
                            <h5>一辉</h5>
                            <small>IKKI</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">限定范围拖放排序</h5>
                <div class="card-body">
                    <ul class="k-list k-reset" id="containerSortable">
                        <li class="sortItem k-item">
                            <img src="img/temp/Pegasus.png" alt="天马座">
                            <h5>星矢</h5>
                            <small>SEIYA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Dragon.png" alt="天龙座">
                            <h5>紫龙</h5>
                            <small>SHIRYU</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Cygnus.png" alt="天鹅座">
                            <h5>冰河</h5>
                            <small>HYOGA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Andromeda.png" alt="仙女座">
                            <h5>瞬</h5>
                            <small>SHUN</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Phoenix.png" alt="凤凰座">
                            <h5>一辉</h5>
                            <small>IKKI</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">水平拖放排序</h5>
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-around" id="horizontalSortable">
                        <img class="imgItem" src="img/temp/Pegasus.png" alt="天马座">
                        <img class="imgItem" src="img/temp/Dragon.png" alt="天龙座">
                        <img class="imgItem" src="img/temp/Cygnus.png" alt="天鹅座">
                        <img class="imgItem" src="img/temp/Andromeda.png" alt="仙女座">
                        <img class="imgItem" src="img/temp/Phoenix.png" alt="凤凰座">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">垂直拖放排序</h5>
                <div class="card-body">
                    <div class="d-flex flex-column align-items-center" id="verticalSortable">
                        <img class="imgItem" src="img/temp/Pegasus.png" alt="天马座">
                        <img class="imgItem" src="img/temp/Dragon.png" alt="天龙座">
                        <img class="imgItem" src="img/temp/Cygnus.png" alt="天鹅座">
                        <img class="imgItem" src="img/temp/Andromeda.png" alt="仙女座">
                        <img class="imgItem" src="img/temp/Phoenix.png" alt="凤凰座">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">偏移拖放排序</h5>
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-around" id="offsetSortable">
                        <img class="imgItem" src="img/temp/Aries.png" alt="白羊座">
                        <img class="imgItem" src="img/temp/Taurus.png" alt="金牛座">
                        <img class="imgItem" src="img/temp/Gemini.png" alt="双子座">
                        <img class="imgItem" src="img/temp/Cancer.png" alt="巨蟹座">
                        <img class="imgItem" src="img/temp/Leo.png" alt="狮子座">
                        <img class="imgItem" src="img/temp/Virgo.png" alt="处女座">
                        <img class="imgItem" src="img/temp/Libra.png" alt="天秤座">
                        <img class="imgItem" src="img/temp/Scorpion.png" alt="天蝎座">
                        <img class="imgItem" src="img/temp/Sagittarius.png" alt="射手座">
                        <img class="imgItem" src="img/temp/Capricorn.png" alt="山羊座">
                        <img class="imgItem" src="img/temp/Aquarius.png" alt="水瓶座">
                        <img class="imgItem" src="img/temp/Picses.png" alt="双鱼座">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">自动滚动拖放排序</h5>
                <div class="card-body" id="wrapperSortable">
                    <div class="d-flex" id="scrollSortable">
                        <img class="imgItem" src="img/temp/Aries.png" alt="白羊座">
                        <img class="imgItem" src="img/temp/Taurus.png" alt="金牛座">
                        <img class="imgItem" src="img/temp/Gemini.png" alt="双子座">
                        <img class="imgItem" src="img/temp/Cancer.png" alt="巨蟹座">
                        <img class="imgItem" src="img/temp/Leo.png" alt="狮子座">
                        <img class="imgItem" src="img/temp/Virgo.png" alt="处女座">
                        <img class="imgItem" src="img/temp/Libra.png" alt="天秤座">
                        <img class="imgItem" src="img/temp/Scorpion.png" alt="天蝎座">
                        <img class="imgItem" src="img/temp/Sagittarius.png" alt="射手座">
                        <img class="imgItem" src="img/temp/Capricorn.png" alt="山羊座">
                        <img class="imgItem" src="img/temp/Aquarius.png" alt="水瓶座">
                        <img class="imgItem" src="img/temp/Picses.png" alt="双鱼座">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">指定元素拖放排序</h5>
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-around" id="filterSortable">
                        <img class="imgItem notSortable" src="img/temp/Pegasus.png" alt="天马座">
                        <img class="imgItem notSortable" src="img/temp/Dragon.png" alt="天龙座">
                        <img class="imgItem notSortable" src="img/temp/Cygnus.png" alt="天鹅座">
                        <img class="imgItem notSortable" src="img/temp/Andromeda.png" alt="仙女座">
                        <img class="imgItem notSortable" src="img/temp/Phoenix.png" alt="凤凰座">
                        <img class="imgItem notSortable" src="img/temp/Goddess.png" alt="女神">
                        <img class="imgItem canSortable" src="img/temp/Aries.png" alt="白羊座">
                        <img class="imgItem canSortable" src="img/temp/Taurus.png" alt="金牛座">
                        <img class="imgItem canSortable" src="img/temp/Gemini.png" alt="双子座">
                        <img class="imgItem canSortable" src="img/temp/Cancer.png" alt="巨蟹座">
                        <img class="imgItem canSortable" src="img/temp/Leo.png" alt="狮子座">
                        <img class="imgItem canSortable" src="img/temp/Virgo.png" alt="处女座">
                        <img class="imgItem canSortable" src="img/temp/Libra.png" alt="天秤座">
                        <img class="imgItem canSortable" src="img/temp/Scorpion.png" alt="天蝎座">
                        <img class="imgItem canSortable" src="img/temp/Sagittarius.png" alt="射手座">
                        <img class="imgItem canSortable" src="img/temp/Capricorn.png" alt="山羊座">
                        <img class="imgItem canSortable" src="img/temp/Aquarius.png" alt="水瓶座">
                        <img class="imgItem canSortable" src="img/temp/Picses.png" alt="双鱼座">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">忽略元素拖放排序</h5>
                <div class="card-body">
                    <ul class="k-list k-reset" id="ignoreSortable">
                        <li class="sortItem k-item">
                            <img src="img/temp/Pegasus.png" alt="天马座">
                            <h5>星矢</h5>
                            <small>SEIYA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Dragon.png" alt="天龙座">
                            <h5>紫龙</h5>
                            <small>SHIRYU</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Cygnus.png" alt="天鹅座">
                            <h5>冰河</h5>
                            <small>HYOGA</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Andromeda.png" alt="仙女座">
                            <h5>瞬</h5>
                            <small>SHUN</small>
                        </li>
                        <li class="sortItem k-item">
                            <img src="img/temp/Phoenix.png" alt="凤凰座">
                            <h5>一辉</h5>
                            <small>IKKI</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">手柄拖放排序</h5>
                <div class="card-body">
                    <ul class="k-list k-reset" id="handlerSortable">
                        <li class="sortItem k-item">
                            <i class="k-icon k-i-handler-drag theme-m"></i>
                            <img src="img/temp/Pegasus.png" alt="天马座">
                            <h5>星矢</h5>
                            <small>SEIYA</small>
                        </li>
                        <li class="sortItem k-item">
                            <i class="k-icon k-i-handler-drag theme-m"></i>
                            <img src="img/temp/Dragon.png" alt="天龙座">
                            <h5>紫龙</h5>
                            <small>SHIRYU</small>
                        </li>
                        <li class="sortItem k-item">
                            <i class="k-icon k-i-handler-drag theme-m"></i>
                            <img src="img/temp/Cygnus.png" alt="天鹅座">
                            <h5>冰河</h5>
                            <small>HYOGA</small>
                        </li>
                        <li class="sortItem k-item">
                            <i class="k-icon k-i-handler-drag theme-m"></i>
                            <img src="img/temp/Andromeda.png" alt="仙女座">
                            <h5>瞬</h5>
                            <small>SHUN</small>
                        </li>
                        <li class="sortItem k-item">
                            <i class="k-icon k-i-handler-drag theme-m"></i>
                            <img src="img/temp/Phoenix.png" alt="凤凰座">
                            <h5>一辉</h5>
                            <small>IKKI</small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">单向拖放排序</h5>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <ul class="k-list k-reset" id="oneWaySortableLeft">
                                <li class="sortItem k-item">
                                    <img src="img/temp/Pegasus.png" alt="天马座">
                                    <h6>星矢</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Dragon.png" alt="天龙座">
                                    <h6>紫龙</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Cygnus.png" alt="天鹅座">
                                    <h6>冰河</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Andromeda.png" alt="仙女座">
                                    <h6>瞬</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Phoenix.png" alt="凤凰座">
                                    <h6>一辉</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Goddess.png" alt="女神">
                                    <h6>雅典娜</h6>
                                </li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="k-list k-reset" id="oneWaySortableRight">
                                <li class="sortItem k-item">
                                    <img src="img/temp/Aries.png" alt="白羊座">
                                    <h6>穆</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Taurus.png" alt="金牛座">
                                    <h6>阿鲁迪巴</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Gemini.png" alt="双子座">
                                    <h6>撒加</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Cancer.png" alt="巨蟹座">
                                    <h6>迪斯马斯克</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Leo.png" alt="狮子座">
                                    <h6>艾欧里亚</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Virgo.png" alt="处女座">
                                    <h6>沙加</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Libra.png" alt="天秤座">
                                    <h6>童虎</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Scorpion.png" alt="天蝎座">
                                    <h6>米罗</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Sagittarius.png" alt="射手座">
                                    <h6>艾俄洛斯</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Capricorn.png" alt="山羊座">
                                    <h6>修罗</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Aquarius.png" alt="水瓶座">
                                    <h6>卡妙</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Picses.png" alt="双鱼座">
                                    <h6>阿布罗狄</h6>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">双向拖放排序</h5>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <ul class="k-list k-reset" id="twoWaySortableLeft">
                                <li class="sortItem k-item">
                                    <img src="img/temp/Pegasus.png" alt="天马座">
                                    <h6>星矢</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Dragon.png" alt="天龙座">
                                    <h6>紫龙</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Cygnus.png" alt="天鹅座">
                                    <h6>冰河</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Andromeda.png" alt="仙女座">
                                    <h6>瞬</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Phoenix.png" alt="凤凰座">
                                    <h6>一辉</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Goddess.png" alt="女神">
                                    <h6>雅典娜</h6>
                                </li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="k-list k-reset" id="twoWaySortableRight">
                                <li class="sortItem k-item">
                                    <img src="img/temp/Aries.png" alt="白羊座">
                                    <h6>穆</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Taurus.png" alt="金牛座">
                                    <h6>阿鲁迪巴</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Gemini.png" alt="双子座">
                                    <h6>撒加</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Cancer.png" alt="巨蟹座">
                                    <h6>迪斯马斯克</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Leo.png" alt="狮子座">
                                    <h6>艾欧里亚</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Virgo.png" alt="处女座">
                                    <h6>沙加</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Libra.png" alt="天秤座">
                                    <h6>童虎</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Scorpion.png" alt="天蝎座">
                                    <h6>米罗</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Sagittarius.png" alt="射手座">
                                    <h6>艾俄洛斯</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Capricorn.png" alt="山羊座">
                                    <h6>修罗</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Aquarius.png" alt="水瓶座">
                                    <h6>卡妙</h6>
                                </li>
                                <li class="sortItem k-item">
                                    <img src="img/temp/Picses.png" alt="双鱼座">
                                    <h6>阿布罗狄</h6>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card mb-3">
                <h5 class="card-header">移动端拖放排序</h5>
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-around" id="mobileSortable">
                        <img class="imgItem" src="img/temp/Aries.png" alt="白羊座">
                        <img class="imgItem" src="img/temp/Taurus.png" alt="金牛座">
                        <img class="imgItem" src="img/temp/Gemini.png" alt="双子座">
                        <img class="imgItem" src="img/temp/Cancer.png" alt="巨蟹座">
                        <img class="imgItem" src="img/temp/Leo.png" alt="狮子座">
                        <img class="imgItem" src="img/temp/Virgo.png" alt="处女座">
                        <img class="imgItem" src="img/temp/Libra.png" alt="天秤座">
                        <img class="imgItem" src="img/temp/Scorpion.png" alt="天蝎座">
                        <img class="imgItem" src="img/temp/Sagittarius.png" alt="射手座">
                        <img class="imgItem" src="img/temp/Capricorn.png" alt="山羊座">
                        <img class="imgItem" src="img/temp/Aquarius.png" alt="水瓶座">
                        <img class="imgItem" src="img/temp/Picses.png" alt="双鱼座">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        .sortItem {
            display: flex;
            align-items: center;
            margin: .5rem 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 4px 8px;
            background: #f6f6f6;
            cursor: move;
        }
        .k-list .sortItem:hover {
            color: inherit;
            background-color: inherit;
        }
        .sortItem img {
            margin-right: 1rem;
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
        }
        .sortItem h5 {
            margin: 0 1rem 0 0;
        }
        .sortItem h6 {
            margin: 0;
        }
        .sortItem small {
            opacity: .5;
        }
        .imgItem {
            margin: .5rem;
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            cursor: move;
        }
        #wrapperSortable {
            width: 100%;
            overflow: auto;
        }
        .disabled,
        .notSortable,
        #ignoreSortable img {
            opacity: .3;
            cursor: no-drop;
        }
        #handlerSortable .sortItem {
            cursor: default;
        }
        #handlerSortable .k-i-handler-drag {
            cursor: move;
        }
        #oneWaySortableRight .sortItem,
        #twoWaySortableRight .sortItem {
            color: #fff;
            background: #666;
        }
    </style>
</script>